<!DOCTYPE html>
<html>
<#include "./head.ftl">

<!-- style="background-color: #16baaa;" -->
<body>
<#include "./head_menu.ftl">
  <div class="layui-container">
  <div class="layui-btn-container" style="margin-bottom: 16px; text-align: center;">
            <button type="button" class="layui-btn layui-bg-blue" id="serach" style="float: left;">查&nbsp;&nbsp;&nbsp;&nbsp;询</button>
            <div class="layui-input-block">
            <input type="text" name="title" autocomplete="off" id="patternSQL" placeholder="select 1,2,3 from a " lay-verify="required" class="layui-input">
            </div>
   
  </div>
  <div class="layui-btn-container" style="margin-bottom: 16px; text-align: center;">
    <!--
     * 概览-所有已分析的请求（2024/01/01/-2024/01/01/）
     * 所有请求    独立访客      请求文件 来源地址
     * 有效的请求  日志解析耗时   静态文件  日志大小
     * 失败的请求  过滤来自此IP的请求 未找到（404） 数据传输
    -->
    <button type="button" class="layui-btn layui-bg-orange" style="float: left;">总请求数「<b id="requestTotalCount"></b>」</button>
    <button type="button" class="layui-btn layui-bg-orange" style="float: left;">独立访客「<b id="singleRequestCount"></b>」</button>
    <!--
    <button type="button" class="layui-btn layui-bg-orange" style="float: left;">200「<b id="request200Count"></b>」</button>
    <button type="button" class="layui-btn layui-bg-orange" style="float: left;">404「<b id="request404Count"></b>」</button>
    <button type="button" class="layui-btn layui-bg-orange" style="float: left;">500「<b id="request500Count"></b>」</button>
    <button type="button" class="layui-btn layui-bg-orange" style="float: left;">400「<b id="request400Count"></b>」</button>
    <button type="button" class="layui-btn layui-bg-orange" style="float: left;">405「<b id="request405Count"></b>」</button>
   -->
</div>

<div class="layui-btn-container container" style="margin-bottom: 16px; text-align: center;clear:both;">
    <button type="button" class="layui-btn layui-bg-orange" style="float: left;">静态文件「<b id="staticFileCount"></b>」</button>
    <button type="button" class="layui-btn layui-bg-orange" style="float: left;">最大耗时「-」</button>
</div>

<div class="layui-btn-container" style="margin-bottom: 6px; text-align: center;" id="seachTable">
    <table class="layui-hide" id="searchResult"></table>
</div>

<div class="layui-btn-container" style="margin-bottom: 6px; text-align: center;" id="initTable">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md4"> <!-- 占一半宽度 -->
            <table class="layui-hide" id="consumTop"></table>
        </div>
        <div class="layui-col-md4"> <!-- 占一半宽度 -->
            <table class="layui-hide" id="viewTop"></table>
        </div>
        <div class="layui-col-md4"> <!-- 占一半宽度 -->
            <table class="layui-hide" id="statusCode"></table>
        </div>
    </div>
</div>
  <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="${base}/layui/layui.js"></script>
<script>
    var $ = layui.$;
    var table;
    layui.use('table', function(){
        showHeadMsg();//显示头部信息

        table=layui.table;
        var title =[];
        var data = [];

        $("#serach").click(function(){
            var patternSQL = $("#patternSQL").val();
            if(null==patternSQL||''==patternSQL){
                layer.msg("请先设置日志格式");
                return false;
            };
            $.ajax({
                url: "${base}/log/search",
                type: "POST",
                async: false,
                data: {
                    patternSQL: patternSQL
                },
                success: function (res) {
                    if (0 == res.jsonCode) {
                        title=res.obj.head;
                        data=res.obj.body;

                        $("#seachTable").empty();
                        $("#seachTable").append('<table id="searchResult"></table>');

                        //第一个实例
                        var tableIns2 = table.render({
                            elem: '#searchResult'
                            , id: 'demoTest'
                            , height: 312
                            // ,url: '/demo/table/user/' //数据接口
                            , data: data
                            , page: true //开启分页
                            , cols: [title]
                        });
                    } else {
                        layer.msg(res.jsonMsg);
                    }
                    return false;
                }
            });
        });

  // 已知数据渲染
  var inst = table.render({
    elem: '#consumTop',
    cellMinWidth: 'auto',
    cols: [[ //标题栏
      {field: 'id', title: '页面URL', width: 180, align: 'center', sort: true},
      {field: 'username', title: '响应时长', align: 'center', width: 120}
    ]],
    data: [{ // 赋值已知数据
      "id": "10001",
      "username": "张三1"
    }, {
      "id": "10002",
      "username": "张三2"
    }, {
      "id": "10003",
      "username": "张三3"
    }],
    //skin: 'line', // 表格风格
    //even: true,
    page: false// 是否显示分页
  });

// 已知数据渲染
var inst = table.render({
    elem: '#viewTop',
    cellMinWidth: 'auto',
    cols: [[ //标题栏
        {field: 'id', title: '页面URL', width: 180, align: 'center', sort: true},
        {field: 'username', title: '计数', align: 'center', width: 120},
        {field: 'username2', title: '平均时长', align: 'center', width: 120}
    ]],
    data: [{ // 赋值已知数据
        "id": "10001",
        "username": "张三1",
        "username2": "张三1"
    }, {
        "id": "10002",
        "username": "张三2",
        "username2": "张三1"
    }, {
        "id": "10003",
        "username": "张三3",
        "username2": "张三1"
    }],
    //skin: 'line', // 表格风格
    //even: true,
    page: false // 是否显示分页
});

        statusCode
// 已知数据渲染
        var inst = table.render({
            elem: '#statusCode',
            cellMinWidth: 'auto',
            cols: [[ //标题栏
                {field: 'statusCode', title: '状态码', width: 180, align: 'center', sort: true},
                {field: 'statusCount', title: '计数', width: 120, align: 'center'},
                {field: 'statusProportion', title: '占比', width: 120, align: 'center'}
            ]],
            // data: [{ // 赋值已知数据
            //     "id": "10001",
            //     "username": "张三1",
            //     "username2": "张三1"
            // }, {
            //     "id": "10002",
            //     "username": "张三2",
            //     "username2": "张三1"
            // }, {
            //     "id": "10003",
            //     "username": "张三3",
            //     "username2": "张三1"
            // }],
            //skin: 'line', // 表格风格
            //even: true,
            page: false // 是否显示分页
        });

});

function showHeadMsg() {
    $.ajax({
        url: "${base}/log/analysis",
        type: "POST",
        async: false,
        //data: data.field,
        success: function (res) {
            if (0 == res.jsonCode) {
                $('#requestTotalCount').text(res.obj.headMsg.requestTotalCount);
                $('#singleRequestCount').text(res.obj.headMsg.singleRequestCount);
                $('#staticFileCount').text(res.obj.headMsg.staticFileCount);

                //第一个实例
                var tableIns2 = table.render({
                    elem: '#searchResult'
                    , id: 'demoTest'
                    , height: 312
                    // ,url: '/demo/table/user/' //数据接口
                    , data: data
                    , page: true //开启分页
                    , cols: [title]
                });
                $('#request200Count').text(res.obj.headMsg.request200Count);
                $('#request404Count').text(res.obj.headMsg.request404Count);
                $('#request400Count').text(res.obj.headMsg.request400Count);
                $('#request405Count').text(res.obj.headMsg.request405Count);
                $('#request500Count').text(res.obj.headMsg.request500Count);
            } else {
                layer.msg(res.jsonMsg);
            }
            //close_msg();
        }, error: function () {
            layer.msg("提交失败!");
        }
    });
}
</script>
</body>
</html>